import { Button, Form, Input, message } from "antd";
import { editpass} from "../../../apis/login";
import { useNavigate, useLocation } from "react-router-dom";
import { RegisterInter } from "../../../apis/types";
import { useState } from "react";

type FieldType = {
  password?: any;
  conpassword?: string;
  verifycode: string;
};
//
function FindPass() {
  const location = useLocation();
  const { code, email } = location.state;
  // 路由跳转
  const navto = useNavigate();
  function to(url: string, values?: RegisterInter) {
    if (values) {
      navto(url, { state: values });
    } else {
      navto(url);
    }
  }
  // 点击确认按钮
  let [Loading, setLoading] = useState<boolean>(false);
  const onFinish = (values: any) => {
    setLoading(true);
    if (code === values.verifycode) {
      editpass({email,password:values.password}).then((res: any) => {
        if (res.code === 200) {
          openMessage("success",res.msg,to,'/login/sign_in')
        }
      });
    } else {
      openMessage("error","验证码错误")
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const [messageApi, contextHolder] = message.useMessage();
  // 弹框
  const openMessage = (
    type: any,
    msg: string,
    callback?: Function,
    url?: string,
    key?: string,
  ) => {
    // 设置key才会干掉加载
    messageApi.open({
      key: key,
      type: type,
      content: msg,
      onClose() {
        callback ? callback(url!) : "";
        setLoading(false);
      },
    });
  };
  return (
    <>
      {contextHolder}
      <div className="logintitle">
        <img src="../../../../public/login/3.svg" alt="" />
        <span>修改密码</span>
      </div>
      <Form
        layout="vertical"
        className="Form"
        name="basic"
        style={{ width: "100%" }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item>
          <p style={{ width: "100%", color: "#fff" }}>{email}</p>
        </Form.Item>
        <Form.Item<FieldType>
          label={<label style={{ color: "#fff", fontWeight: 600 }}>密码</label>}
          name="password"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>确认密码</label>
          }
          name="conpassword"
          rules={[{ required: true, message: "Please confirm your password!" }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>验证码</label>
          }
          name="verifycode"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" block loading={Loading}>
            <label style={{ fontWeight: "bold" }}>修改密码</label>
          </Button>
        </Form.Item>
      </Form>
      <div className="forgetPass"></div>
      <div className="more">
        没收到验证码?
        <span className="toregister" onClick={() => to("/login/sign_in")}>
          重新获取
        </span>
      </div>
    </>
  );
}

export default FindPass;
